<template>
    <div>
        <div class="mc-common-title">
            <div class="mcct-left">
                <span></span>
                <span>员工信息</span>
            </div>
            <button
                    class="mcct-right"
                    @click="dialogVisible = true,qingchu()"
            >新增员工
            </button>
        </div>
        <el-table
                :data="tableData"
                style="width: 100%"
                :header-cell-style="{ background: '#F2F2F2', color: '#333333' }"
        >
            <el-table-column
                    prop="id"
                    type="index"
                    label="序号"
            >
            </el-table-column>
            <el-table-column
                    prop="staffNumber"
                    label="工号"
            >
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名"
            >
            </el-table-column>
            <el-table-column
                    prop="storeName"
                    label="所属门店"
            >
            </el-table-column>
            <el-table-column
                    prop="phone"
                    label="手机号"
            >
            </el-table-column>
            <!--      <el-table-column
                          prop="userName"
                          label="账号"
                  >
                  </el-table-column>
                  <el-table-column
                          prop="passWord"
                          label="密码"
                  >
                  </el-table-column> -->
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100"
            >
                <template slot-scope="props">
                    <el-button
                            @click="updateEmplee = true,empleeId = props.row.id,getEmpleeDetail(props.$index)"
                            type="text"
                            size="small"
                            :style="{color: '#C29C0F'}"
                    >编辑
                    </el-button>

                    <el-button
                            @click="openquxiao(props.row.id)"

                            type="text"
                            size="small"
                            :style="{color: '#C29C0F'}"
                    >删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog
                title="新增员工"
                :visible.sync="dialogVisible"
                width="460px"
                :close-on-click-modal="false"
        >
            <span style="color: #ee0a0a;margin-right: 2px">*</span>员工名称
            <el-input
                    v-model="ruleForm.name"
                    placeholder="请填写员工名称！"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'10px'}"
            ></el-input>
            <br/>

            <span style="color: #ee0a0a;margin-right: 2px">*</span>所属门店
            <el-select
                    v-model="storeNum"
                    placeholder="请选择员工所属门店！"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'10px'}"
            >
                <el-option :value="item.id" v-for="item in ruleForm.mendian" :key="item.id" :label="item.storeName"
                >
                    {{item.storeName}}
                </el-option>
            </el-select>
            <br/>
            <span style="color: #ee0a0a;margin-right: 2px">*</span>员工身份
            <el-select
                    v-model="identity"
                    placeholder="请选择员工身份"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'10px'}"
            >
                <el-option value="0" label="普通员工"
                >

                </el-option>
                <el-option value="2" label="管理员"
                >

                </el-option>
            </el-select>
            <br/>
            <span style="color: #ee0a0a;margin-right: 2px">*</span>手机号码
            <el-input
                    v-model="ruleForm.phone"
                    placeholder="请填写员工手机号！"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'10px'}"
            ></el-input>
            <br/>
            <span style="color: #ee0a0a;margin-right: 2px">*</span>员工工号
            <el-input
                    v-model="ruleForm.num"
                    placeholder="请填写员工工号！"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'10px'}"
            ></el-input>
            <!--      <el-input
                          v-model="ruleForm.accout"
                          placeholder="请填写员工登录账号！"
                          :style="{marginBottom: '20px', width: '46%', marginRight: '25px'}"
                  ></el-input>
                  <el-input
                          v-model="ruleForm.pwd"
                          :style="{width: '46%'}"
                          placeholder="请填写登录密码！"
                          show-password
                  ></el-input> -->
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
                type="primary"
                @click="handleSubmit"
        >确 定</el-button>

      </span>
        </el-dialog>

        <!--编辑员工-->
        <el-dialog
                title="编辑员工"
                :visible.sync="updateEmplee"
                width="460px"
                :close-on-click-modal="false"
        >
            员工名称
            <el-input
                    v-model="ruleForm.name"
                    placeholder="请填写员工名称！"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'10px'}"
            ></el-input>
            <br/>
            员工工号
            <el-input
                    :disabled="true"
                    v-model="ruleForm.num"
                    placeholder="请填写员工工号！"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'10px'}"
            ></el-input>
            <br/>


            所属门店
            <el-select
                    v-model="storeNum"
                    placeholder="请选择员工所属门店！"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'10px'}"
            >
                <el-option :value="item.id.toString()" v-for="(item,key) in ruleForm.mendian" :key="item.id"
                           :label="item.storeName"
                >
                    {{item.storeName}}
                </el-option>
            </el-select>
            <br/>

            员工身份
            <el-select
                    :disabled="shenfen"
                    v-model="identity"
                    placeholder="请选择员工身份"
                    :style="{marginBottom: '20px', width: '46%', marginRight: '25px',marginLeft:'10px'}"
            >
                <el-option :value="0" label="普通员工"
                >

                </el-option>
                <el-option :value="2" label="管理员"
                >

                </el-option>
            </el-select>
            <br/>


            联系电话
            <el-input
                    :disabled="true"
                    v-model="ruleForm.phone"
                    placeholder="请填写员工联系电话！"
                    :style="{marginBottom: '20px', width: '46%',marginLeft:'10px'}"
            ></el-input>
            <!--  <el-input
                      v-model="ruleForm.accout"
                      placeholder="请填写员工登录账号！"
                      :style="{marginBottom: '20px', width: '46%', marginRight: '25px'}"
              ></el-input>
              <el-input
                      v-model="ruleForm.pwd"
                      :style="{width: '46%'}"
                      placeholder="请填写密码！"
                      show-password
              ></el-input> -->
            <span
                    slot="footer"
                    class="dialog-footer"
            >
        <el-button @click="updateEmplee = false">取 消</el-button>
        <el-button
                type="primary"
                @click="update"
        >确 定</el-button>

      </span>
        </el-dialog>


        <!--取消订单的弹框-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible3"
                width="30%"
        >
            <span>确定删除员工吗？</span>
            <span slot="footer" class="dialog-footer">
		  <el-button @click="dialogVisible3 = false">取 消</el-button>
		  <el-button type="primary" @click="dialogVisible3 = false,deletestaff()">确 定</el-button>
		</span>
        </el-dialog>
    </div>
</template>

<script>
    import {getAction, postAction} from '@/api/manage'

    export default {
        data() {
            return {
                shenfen: false,
                identity: '',
                id: '',
                dialogVisible3: false,
                token: localStorage.getItem("token"),
                companyCode: '',
                companyId: '',
                empleeId: '', // 员工ID
                storeNum: "",
                url: {
                    storelist: '/company/querystoreBycompanyId',
                    list: "/company/getyuangonglistBycompanyId",
                    add: "/company/addstaff",
                    del: "/company/deletestaff",
                    detail: "/company/getstaffbyid",
                    update: "/company/updatestaff",
                    queryCompanyCode: "/company/queryCompanyCode",
                    queryCompanyId: '/company/queryCompanyId'
                },
                dialogVisible: false,
                updateEmplee: false,
                currentIndex: 2,
                ruleForm: {
                    name: "",
                    num: "",
                    phone: "",
                    mendian: [],
                    accout: "",
                    pwd: "88888888",
                },
                tableData: [
                    {},
                ],
            };
        },
        created() {
            getAction(domain.publicUrl + this.url.queryCompanyId, {'token': this.token}).then(res => {
                this.companyId = res.data.data
            })
            getAction(domain.publicUrl + this.url.queryCompanyCode, {'token': this.token}).then(res => {
                this.companyCode = res.data.data
                this.getData()
            })
        },
        methods: {
            // 打开取消顶订单的弹框
            openquxiao(id) {
                this.dialogVisible3 = true
                this.id = id
            },
            // 添加的加载数据方法
            getData() {
                getAction(domain.publicUrl + this.url.list, {
                    'companyOrgcode': this.companyCode,
                    'token': this.token
                }).then(res => {
                    this.tableData = res.data.data.records
                })
            },
            //删除员工
            deletestaff() {
                let staffID = this.id;
                getAction(domain.publicUrl + this.url.del, {'id': staffID, 'token': this.token}).then(res => {
                    if (res) {
                        this.$message.success(res.data.data)
                    } else {
                        this.$message.success("删除失败！")
                    }
                    this.getData()
                })
            },

            // 编辑之前查详情
            getEmpleeDetail(index) {
                this.shenfen = false;
                console.log(index)
                if (index == 0) {
                    this.shenfen = true;
                }
                getAction(domain.publicUrl + this.url.storelist, {
                    'companyId': this.companyId,
                    'token': this.token
                }).then(res => {
                    this.ruleForm.mendian = res.data.data.records
                    console.log("让我看看里面有没有取到值吧" + this.ruleForm.mendian[0].storeName);
                })
                getAction(domain.publicUrl + this.url.detail, {'id': this.empleeId, 'token': this.token}).then(res => {
                    this.storeNum = res.data.data.storeId;
                    this.ruleForm.name = res.data.data.realName;
                    this.ruleForm.num = res.data.data.staffNumber;
                    this.ruleForm.phone = res.data.data.phone;
                    this.ruleForm.accout = res.data.data.userName;
                    this.ruleForm.pwd = res.data.data.passWord;
                    this.identity = res.data.data.identity;
                })
            },

            qingchu() {
                this.identity = "";
                this.ruleForm.name = "";
                this.ruleForm.num = "";
                this.ruleForm.phone = "";
                this.ruleForm.accout = "";
                this.storeNum = "";
                this.ruleForm.pwd = "";
                //清楚后附上下拉
                getAction(domain.publicUrl + this.url.storelist, {
                    'companyId': this.companyId,
                    'token': this.token
                }).then(res => {
                    this.ruleForm.mendian = res.data.data.records
                })
            },

            //编辑员工信息
            update() {
                if (this.ruleForm.name == '' || this.ruleForm.name == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写员工名称",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (this.storeNum == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请选择员工所属门店",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (this.identity == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请选择员工身份",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (!(/^1[3456789]\d{9}$/.test(this.ruleForm.phone))) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入正确格式的手机号",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (this.ruleForm.num == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入员工的工号",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                postAction(domain.publicUrl + this.url.update, {
                    'companyOrgcode': this.companyCode,
                    'id': this.empleeId,
                    'realName': this.ruleForm.name,
                    'staffNumber': this.ruleForm.num,
                    'phone': this.ruleForm.phone,
                    'storeId': this.storeNum,
                    'identity': this.identity
                }).then(res => {
                    let result = res.data;
                    if (result.code == 0) {
                        this.$message.success("修改成功！")
                        this.updateEmplee = false
                    } else {
                        this.$message.error(res.data.data);
                    }
                    this.getData();
                })
            },
            // 添加员工的方法
            handleSubmit() {
                if (this.ruleForm.name == '' || this.ruleForm.name == null) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请填写员工名称",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (this.storeNum == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请选择员工所属门店",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (this.identity == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请选择员工身份",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (!(/^1[3456789]\d{9}$/.test(this.ruleForm.phone))) {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入正确格式的手机号",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                if (this.ruleForm.num == '') {
                    this.$notify.warning({
                        title: "提示",
                        message: "请输入员工的工号",
                        offset: 10,
                        duration: 1500,
                    });
                    return;
                }
                let params = {
                    identity: this.identity,
                    companyOrgcode: this.companyCode,
                    realName: this.ruleForm.name,
                    staffNumber: this.ruleForm.num,
                    phone: this.ruleForm.phone,
                    userName: this.ruleForm.accout,
                    storeId: this.storeNum,
                    passWord: this.ruleForm.pwd,
                    token: this.token
                };
                // 发送请求
                postAction(domain.publicUrl + this.url.add, params).then(res => {
                    if (res.data.code == "0") {
                        this.$message.success("添加成功！")
                        // 清空数据
                        params.index = this.currentIndex;
                        this.tableData.unshift(params);
                        this.ruleForm.name = "";
                        this.ruleForm.num = "";
                        this.ruleForm.phone = "";
                        this.ruleForm.accout = "";
                        this.ruleForm.mendian = "";
                        this.ruleForm.pwd = "";
                        this.identity = "";
                        this.currentIndex++;
                        this.dialogVisible = false;
                    } else {
                        this.$message.error(res.data.data)
                    }
                    this.getData()
                })

            },
        },
    };
</script>

<style lang="scss" scoped>
    .mc-common-title {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 20px;

        .mcct-left {
            display: flex;
            align-items: center;

            span:nth-child(1) {
                display: block;
                width: 5px;
                height: 25px;
                background: #4b4b4b;
            }

            span:nth-child(2) {
                font-size: 16px;
                font-weight: 500;
                color: #4e4e4e;
                margin-left: 15px;
            }
        }

        .mcct-right {
            width: 84px;
            height: 38px;
            background: #333333;
            border-radius: 3px;
            color: #f9d532;
            font-size: 14px;
            cursor: pointer;
        }
    }
</style>
